/*
 * @param {String} type - 样式类型
 * @param {String} size - 按钮尺寸
 * @param {String} background - 按钮颜色，可传入linear-gradient渐变色
 * @param {String} color - 文字颜色
 * @param {String} shape - 按钮形状
 * @param {String} open-animation - 是否开启动画
 * @param {String} animation - 动画样式，open-animation=true时有效
 * @param {String} background-img - 背景图片，必须使用绝对路径或网络路径，图片自动适应按钮
 * @param {String} font-opacity - 设置图片背景时，按钮文字是否完全透明
 * @param {String} loading - 名称前是否带 loading 图标
 * @param {String} disable	 - 是否禁用按钮
 * @param {String} throttle-time - 节流时间，同一时间内无论点击多少次按钮，只触发一次click事件，单位ms
 */


/*
 * @onclick - 点击按钮触发，默认节流500ms，受throttle-time参数控制
 */


<template>
	<button
	class="uH5-button-default"
	:class="[
		'uH5-button-type--' + type,
		'uH5-button-size--' + size,
		'uH5-button-shape--' + shape,
		(openAnimation == true ? 
		('uH5-button-animation--' + animation)
		: ''),
		(backgroundImg != '' ? 'uH5-button-background-img' : ''),
		(fontOpacity == true && backgroundImg != '' ? 'uH5-button-font-opacity' : '')
	]"
	:style="
		'background:' + background +
		';color:' + color +
		';background-image: url(' + backgroundImg + ')'
	"
	:loading="loading"
	:disable="disable"
	@click="onclick"
	>
		<slot></slot>
	</button>
</template>


<script>

import throttling from '@/uh5/function/throttling/throttling.js'

export default {
	name: 'u-button',
	
	data() {
		return {
			
		}
	},
	
	props: {
		
		type: {//样式类型
			type: String,
			default: 'default'
		},
		
		size: {//按钮尺寸
			type: String,
			default: 'medium'
		},
		
		background: {//按钮颜色
			type: String,
			default: ''
		},
		
		color: {//文字颜色
			type: String,
			default: ''
		},
		
		shape: {//按钮形状
			type: String,
			default: 'square'
		},
		
		openAnimation: {//是否开启动画
			type: Boolean,
			default: false
		},
		
		animation: {//动画样式
			type: String,
			default: 'none'
		},
		
		backgroundImg: {//背景图片
			type: String,
			default: ''
		},
		
		fontOpacity: {//文字是否完全透明
			type: Boolean,
			default: false
		},
		
		loading: {//是否带loading雪花加载图标
			type: Boolean,
			default: false
		},
		
		disable: {//是否禁用按钮
			type: Boolean,
			default: false
		},
		
		throttleTime: {//节流时间
			type: String,
			default: '500'
		},
		
	},
	
	methods: {
		
		
		/*
		 * 按钮点击事件
		 * @return void
		 */
		onclick: function()
		{
			if(this.disable == false){
				throttling(() => {
					this.$emit('onclick')
				}, this.throttleTime)
			}
		}
		
	}
	
}
</script>

<style lang="scss">

button::after { border: none }

// 基础样式
.uH5-button-default{
	letter-spacing: 1rpx;
	padding: 10rpx 0;
	color: #FFFFFF;
	border: 0rpx solid #ff;
}
// END


// type--样式类型
.uH5-button-type--primary {
	background: $color-primary;
}

.uH5-button-type--success {
	background: $color-success;
}

.uH5-button-type--error {
	background: $color-error;
}

.uH5-button-type--warning {
	background: $color-warning;
}

.uH5-button-type--info {
	background: $color-info;
}

.uH5-button-type--default {
	border: 1px solid #c8c9cc;
	background: #FFFFFF;
	color: #777879;
}

.uH5-button-type--{//type=""
	border: 1px solid #c8c9cc;
	background: #FFFFFF;
	color: #777879;
}
// END



// size--按钮尺寸
.uH5-button-size--small {
	width: 250rpx;
}
.uH5-button-size--block {
	width: 100%;
}
.uH5-button-size--medium {
	width: 450rpx;
}
.uH5-button-size--{//size=""
	width: 450rpx;
}
// END



// shape--按钮形状
.uH5-button-shape--square{}
.uH5-button-shape--{}//shape=""
.uH5-button-shape--circle {
	border-radius: 100rpx;
}
// END



// animation--按钮动画样式
.uH5-button-animation--scale {
	@-webkit-keyframes scale {
		0% {transform: scale(0.8);}
		50% {transform: scale(1);}
		100% {transform: scale(0.8);}
	}
	animation: scale 1s .15s linear infinite;
	-moz-animation: scale 1s .15s linear infinite;
	-webkit-animation: scale 1s .15s linear infinite;
	-o-animation: scale 1s .15s linear infinite;
}
.uH5-button-animation--rotate{
	@-webkit-keyframes rotate{ 
		10% {transform: rotate(15deg);} 
		20% {transform: rotate(-10deg);} 
		30% {transform: rotate(5deg);} 
		40% {transform: rotate(-5deg);} 
		50%,100% {transform: rotate(0deg);} 
	}
	animation: rotate 2s .15s linear infinite;
	-moz-animation: rotate 2s .15s linear infinite;
	-webkit-animation: rotate 2s .15s linear infinite;
	-o-animation: rotate 2s .15s linear infinite;
}
.uH5-button-animation--{}//animation=""
.uH5-button-animation--none{}
// END


// background-img 图片自适应/文字透明
.uH5-button-background-img{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: none;//去掉type=""边框线
}
.uH5-button-font-opacity {
	color: rgba(255,255,255,0.0)
}
// END
</style>